<template>
	<view class="page room bgf7 c00">
		<view class="flex flexC flexB py14 bgff">
			<picker class="flex1 aliC" mode="selector" :range="statusList" @change="changeStatus">
				<view>
					<text>{{statusList[statusIndex]}}</text>
					<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</picker>

			<view class="flex1 aliC" @click="showShop">
				<view>
					<text>{{selectShop.name}}</text>
					<image class="ml4 w12" src="/static/img/icon/down.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="list">
			<view v-for="(item,index) in roomList" :key="index" class="bgff m15 r7 pt24 pb20 px12 shadow">
				<view class="flex flexC">
					<image class="w82 r6" :src="item.logo" mode="aspectFill"></image>
					<view class="flex1 ml12">
						<view class="flex flexC  mb16">
							<text class="flex1 bold6">{{item.name}}</text>
							<text class="flex1 aliR cff0" v-if="item.status == 'free'">状态：营业中</text>
							<text class="flex1 aliR cff0" v-else-if="item.status == 'stop'">状态：维护中</text>

						</view>
						<view class="">包厢ID：{{item.id}}</view>

						<view class="">押金：{{item.ya_amount}}元</view>
						<view class="">最低消费：{{item.min_amount}}元</view>
						<view class="">{{item.rule.time1}} ￥{{item.rule.price1}}元/小时</view>
						<view class="">{{item.rule.time2}} ￥{{item.rule.price2}}元/小时</view>

					</view>
				</view>
				<view class="flex flexC flexJC mt18 aliC">
					<text @click="goUnbind(item)" class="bged r40 w72 py4 mx6" v-if="item.bind == 1">解绑</text>
					<text @click="goBind(item)" class="bged r40 w72 py4 mx6" v-else>绑定</text>
					<text class="bged r40 w72 py4 mx6" @click.stop="editSet(item)">套餐</text>
					<text class="bged r40 w72 py4 mx6" @click.stop="edit(item)">编辑</text>
					<text class="bged r40 w72 py4 mx6" @click.stop="open(item)">开台</text>
					<text class="bged r40 w72 py4 mx6" @click.stop="closeTable(item)">关台</text>

				</view>
			</view>
		</scroll-view>
		<view class="add r50 bged aliC" @click="clickAdd">添加</view>


		<uni-popup ref="doorPop" type="bottom">
			<view class="popup-content2">

				<button class="popup-btn button" @click="openRoomCmd(60)">1分钟</button>
				<button class="popup-btn button" @click="openRoomCmd(600)">10分钟</button>
				<button class="popup-btn button" @click="openRoomCmd(1800)">30分钟</button>
				<button class="popup-btn button" @click="openRoomCmd(3600)">1个小时</button>
				<button class="popup-btn button" @click="openRoomCmd(7200)">2个小时</button>



				<view class="popup-btn" @click="$refs.doorPop.close()">取消</view>
			</view>

		</uni-popup>


		<uni-popup ref="setPop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="clickNormalSet">普通套餐</button>
				<button class="popup-btn button" @click="clickSaleSet">营销套餐</button>
		
				<view class="popup-btn" @click="$refs.setPop.close()">取消</view>
			</view>
		
		</uni-popup>

		<uni-popup ref="pop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="updateBind">解绑</button>

				<view class="popup-btn" @click="$refs.pop.close()">取消</view>
			</view>

		</uni-popup>

		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>


	</view>
</template>

<script>
	const plugin = requirePlugin("myPlugin");

	export default {
		data() {
			return {
				currentIndex: 0,
				list: ['全部', '包厢状态', '绑定状态', '雀和友店'],
				statusList: ["使用状态", '空闲', '使用中', '打扫中', '维护中'],
				bindList: ["绑定状态", '已绑定', '未绑定'],
				roomOne: null,
				roomTime: null,
				selectShop: null,
				room: null,
				roomList: [],
				statusIndex: 0,
				bindIndex: 0,
				shopList: [],
				currentRoom: null,
				selectDate: '',
				tabType: 0,
				hourSetList: []
			};
		},

		onLoad(option) {
			var select = option.selectShop;
			if (select != "") {
				this.selectShop = JSON.parse(select);
			}

		},
		onShow() {

			this.getList();
		},

		methods: {



			editSet(item) {
				this.setItem = item;
				this.$refs.setPop.open();
				
				// uni.navigateTo({
				// 	url: '/other/table/setEdit?id=' + item.id
				// })
			},
			
			clickNormalSet() {
				this.$refs.setPop.close();
				uni.navigateTo({
					url: '/other/table/setEdit?id=' + this.setItem.id
				})
			},
			
			clickSaleSet() {
				this.$refs.setPop.close();
				uni.navigateTo({
					url: '/other/table/saleSetEdit?id=' + this.setItem.id
				})
			
			},

			showOpen() {
				this.$refs.doorPop.close();
				this.$refs.timePop.open();
			},


			closeTable(item) {


				let param = {
					shop_id: this.selectShop.id,
					room_id: item.id,
					sec: 0,
				};
				let that = this;
				this.$api.closeTableCmd(param).then(res => {

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {

					} else {

					}
				})
			},




			switchTab(tabIndex) {

				this.tabType = tabIndex;
				if (tabIndex == 0) {
					this.getOne();
				} else if (tabIndex == 1) {
					this.getTwo();
				} else {
					this.getThree();
				}
				console.info("===switchTab====" + tabIndex);
			},
			getOne() {
				let param = {
					id: this.room.id,
					date: this.selectDate
				};
				let that = this;
				this.$api.roomTimeOne(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.roomOne = res.data;
					} else {

					}
				})
			},


			openRoomCmd(time) {
				this.$refs.doorPop.close();

				let param = {
					shop_id: this.selectShop.id,
					room_id: this.currentRoom.id,
					sec: time,
				};
				let that = this;
				this.$api.openTable(param).then(res => {

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						if (res.data.is_bt == 1) {
							that.getBtLockData(res.data);
						}
					} else {

					}
				})
			},
			open(item) {
				this.currentRoom = item;
				this.$refs.doorPop.open();

			},

			updateBind() {

				this.$refs.pop.close();
				let param = {
					room_id: this.currentRoom.id
				};
				let that = this;
				this.$api.unbindDevice(param).then(res => {

					if (res.code == 1) {
						uni.showModal({
							title: "解绑提示",
							content: "解绑成功",
							showCancel: false,
							complete() {
								that.getList();
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			goUnbind(item) {

				this.currentRoom = item;
				this.$refs.pop.open();
			},

			goBind(item) {
				uni.navigateTo({
					url: '/other/table/bindDevice?selectShop=' + JSON.stringify(this.selectShop) + "&room=" + JSON
						.stringify(item)
				})
			},



			edit(item) {
				uni.navigateTo({
					url: '../table/edit?id=' + item.id
				})
			},

			onClose() {
				this.$refs.shopPicker.close();
			},
			getShopList() {
				let param = {
					keyword: this.keyword
				};
				let that = this;
				this.$api.getShopList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shopList = res.data;
						if (that.shopList.length > 0) {

						}
					} else {

					}
				})
			},

			showShop() {
				this.$refs.shopPicker.open();

			},
			search(value) {

				this.keyword = value;
				this.getShopList();
			},

			onSelectShop(item) {
				this.selectShop = item;
				this.$refs.shopPicker.close();
				this.getList();

			},


			changeStatus(e) {
				console.info(e.detail.value);
				this.statusIndex = e.detail.value;
				this.getList();
			},
			changeBind(e) {
				this.bindIndex = e.detail.value;
				this.getList();
			},

			clickAdd() {
				uni.navigateTo({
					url: '/other/table/add?selectShop=' + JSON.stringify(this.selectShop)
				})
			},
			getList() {
				let param = {
					shop_id: this.selectShop.id,
					status: this.statusIndex,
				};
				let that = this;
				this.$api.tableList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.roomList = res.data;
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.room {
		.w12 {
			width: 24rpx;
		}

		.w82 {
			width: 164rpx;
			height: 164rpx;
		}

		.w72 {
			width: 144rpx;
			display: inline-block;
		}

		.list {
			height: calc(100vh - 96rpx);
		}

		.add {
			position: fixed;
			bottom: 100px;
			right: 10rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 2rpx solid #418FF4;
		}
	}


	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>